<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>PaddleOCR 网络服务客户端 (显示识别文本)</title>
    <style>
        /* 样式保持不变 */
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; background-color: #f4f4f9; }
        .container { max-width: 600px; margin: auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
        h1 { color: #333; border-bottom: 2px solid #007bff; padding-bottom: 10px; margin-bottom: 20px; }
        input[type="file"] { margin-bottom: 15px; display: block; }
        button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; }
        button:hover { background-color: #0056b3; }
        #status { margin-top: 15px; padding: 10px; border-radius: 5px; font-weight: bold; }
        #result-box { margin-top: 20px; padding: 15px; border: 1px solid #ccc; background-color: #e9ecef; border-radius: 5px; min-height: 100px; white-space: pre-wrap; word-wrap: break-word; }
        .error { color: #dc3545; background-color: #f8d7da; border: 1px solid #f5c6cb; }
        .success { color: #28a745; background-color: #d4edda; border: 1px solid #c3e6cb; }
        .info { color: #004085; background-color: #cce5ff; border: 1px solid #b8daff; }
    </style>
</head>
<body>

    <div class="container">
        <h1>图片文字识别 (显示识别文本)</h1>
        <p>服务端将识别结果返回给客户端并在此处显示。</p>
        
        <input type="file" id="imageInput" accept="image/png, image/jpeg, image/jpg">
        <button type="button" onclick="uploadImage()">开始识别</button>

        <div id="status" class="info">请选择一张图片并点击“开始识别”。</div>

        <h2>识别结果</h2>
        <div id="result-box">
            识别出的文字将显示在这里...
        </div>
    </div>

    <script>
        // 服务端的 API 地址
        const UPLOAD_URL = 'http://127.0.0.1:5000/upload_image';
        
        const imageInput = document.getElementById('imageInput');
        const statusDiv = document.getElementById('status');
        const resultBox = document.getElementById('result-box');

        /**
         * 上传图片并获取识别结果
         */
        async function uploadImage() {
            // 1. 检查文件是否已选择
            if (imageInput.files.length === 0) {
                updateStatus('请先选择一个图片文件！', 'error');
                resultBox.innerText = '操作失败。';
                return;
            }

            const file = imageInput.files[0];
            updateStatus('正在上传图片并进行识别...', 'info');
            resultBox.innerText = '正在等待服务器响应...';

            // 2. 构造 FormData 对象
            const formData = new FormData();
            formData.append('file', file); 
            
            let response;
            let data;

            try {
                // 3. 使用 Fetch API 发送 POST 请求 (等待服务器处理)
                response = await fetch(UPLOAD_URL, {
                    method: 'POST',
                    body: formData
                });
                
                // --- 调试点 1: 检查响应状态码 ---
                console.log(`[DEBUG] HTTP 响应状态码: ${response.status}`);
                updateStatus(`已收到服务器响应 (状态码: ${response.status})，正在解析...`, 'info');


                // 4. 尝试解析 JSON 响应
                try {
                    data = await response.json();
                } catch (jsonError) {
                    // 如果服务器返回了非 JSON 格式或空响应，这里会捕获错误
                    const textResponse = await response.text();
                    updateStatus(`JSON 解析失败！服务器返回内容不是有效的 JSON 格式。`, 'error');
                    resultBox.innerText = `错误: 服务器返回内容无法解析为 JSON。\n原始文本响应 (请检查 CORS 或服务器日志):\n${textResponse.substring(0, 200)}...`;
                    console.error('[ERROR] JSON 解析失败:', jsonError);
                    console.log('[ERROR] 服务器返回的文本:', textResponse);
                    return; // 停止执行
                }
                
                // --- 调试点 2: 打印原始数据 ---
                console.log('--- 服务端原始返回数据开始 ---');
                console.log(data); 
                console.log('--- 服务端原始返回数据结束 ---');


                // 5. 根据响应状态码和业务逻辑代码进行处理
                if (response.ok && data.code === 200) {
                    updateStatus('识别成功！', 'success');
                    resultBox.innerText = data.recognized_text || '未识别到任何文字。';
                } else {
                    // 服务端返回的错误 (如文件类型错误)
                    updateStatus(`识别失败 (Code: ${data.code || response.status})`, 'error');
                    resultBox.innerText = `错误信息: ${data.message || '未知错误'}\n详细代码: ${data.code || response.status}`;
                }

            } catch (error) {
                // 捕获网络错误 (如服务未启动、连接超时、CORS 预检失败)
                updateStatus(`网络错误或服务连接失败: ${error.message}`, 'error');
                resultBox.innerText = '无法连接到服务端，请确保 app.py 正在运行并且网络配置正确（特别是 CORS）。';
                console.error('上传或识别过程中发生严重的网络错误:', error);
            }
        }

        /**
         * 更新状态栏信息
         */
        function updateStatus(message, type) {
            statusDiv.innerText = message;
            statusDiv.classList.remove('error', 'success', 'info');
            if (type === 'error') {
                statusDiv.classList.add('error');
            } else if (type === 'success') {
                statusDiv.classList.add('success');
            } else {
                statusDiv.classList.add('info');
            }
        }
    </script>

</body>
</html>